*{
	padding: 0;
	margin: 0;
}
body{
	height: 100vh;
	background: radial-gradient(circle at top,#444,#000);
	
}
/* 初始化,取消页面元素的内外边距 */
.head01{
	position: fixed;
	background-image: url('../img/顶部背景图片.png');
	width: 100%;
	height: 16.5%;
	/* 不重复平铺 */
	background-repeat:no-repeat;
	/* 第一个是左右拉伸 第二是上下 */
	background-size:100% ;
	z-index: 2;
}
.head02{
	position: relative;
	width: 100%;
	height: 100%;
}
.L{	
	position: absolute;
	top: 3%;
	left: 3%;
	
}

	.text{
		position: absolute;
		top: 0%;
		left: 0%;
		
		
	    color: #fff;
	   
	    font-size: 500%;
		font-weight: 900;
	    text-transform: uppercase;
	    letter-spacing: 5px;
	    width: 100vw;
		
	   
		 /* text-align: center; */
	}
	.text::before,
	.text::after{
	    content: "弹簧的良品铺子";
	    position: absolute;
	    top: 0%;
	    left: 0%;
	    width: 100%;
	}
	.text::before{
	    left: -3px;
	    text-shadow: -2px 0 #00ffff;
	    /* 执行动画:动画名 时长 线性的 无限次播放 反向播放 */
	    animation: fault1 1.5s linear infinite reverse;
	}
	.text::after{
	    left: -3px;
	    text-shadow: -2px 0 #ff0050;
	    animation: fault2 1.5s linear infinite reverse;
	}
	
	
	
	
	
	/* 故障动画1 */
	@keyframes fault1 {
	    0%{
	        /* --t,--b为自定义属性,通过var函数对其调用 */
	        /* 这两个数值是随机生成的,可以自己进行设定,数值不一样,抖动的效果也会不一样 */
	        --t:132px;
	        --b:101px;
	        /* 剪裁一个矩形(top,right,bottom,left) 和margin是一样的 */
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    10%{
	        --t:40px;
	        --b:66px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    20%{
	        --t:137px;
	        --b:61px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    30%{
	        --t:133px;
	        --b:74px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    40%{
	        --t:59px;
	        --b:130px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    50%{
	        --t:22px;
	        --b:67px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    60%{
	        --t:10px;
	        --b:105px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    70%{
	        --t:105px;
	        --b:13px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    80%{
	        --t:66px;
	        --b:39px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    90%{
	        --t:36px;
	        --b:128px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    100%{
	        --t:14px;
	        --b:100px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	}
	/* 故障动画2 */
	@keyframes fault2 {
	    0%{
	        --t:129px;
	        --b:36px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    10%{
	        --t:85px;
	        --b:66px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    20%{
	        --t:148px;
	        --b:138px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    30%{
	        --t:69px;
	        --b:54px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    40%{
	        --t:146px;
	        --b:34px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    50%{
	        --t:102px;
	        --b:80px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    60%{
	        --t:106px;
	        --b:99px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    70%{
	        --t:20px;
	        --b:78px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    80%{
	        --t:78px;
	        --b:52px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    90%{
	        --t:67px;
	        --b:70px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    100%{
	        --t:83px;
	        --b:40px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	}
	
	
	
	
.S-box{
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #2f3640;
	height: 40px;
	padding: 10px;
	border-radius: 40px;
}

.S-txt{
	border: none;
	background: none;
	outline: none;
	float: left;
	padding: 0;
	color: #fff;
	font-size: 16px;
	line-height: 40px;
	
	width: 0;
	/* 动画过渡 */
	transition: 0.4s;
}

.S-btn{
	color: #fff;/* #e84118 */
	float: right;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #2f3640;
	
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	
	/* 动画过渡 */
	transition: 0.4s;
}

.S-box:hover .S-txt{
	width: 400px;
	padding: 0 6px;
	
}

.S-box:hover .S-btn{
	background-color: #ff753e;
	
}
.G1{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 60px;
	margin: 30px;
	
	/* 隐藏 */
	visibility: hidden;
}

.G1 .button-man a{
	/* 绝对定位 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 透明度为0.05的白色背景 */
	background: rgba(255, 255, 255, 0.05);
	/* 阴影 */
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
	/* 上下边框 */
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	/* 圆角 */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	color:  #fff;
	z-index: 1;
	font-weight: 400;
	/* 字间距 */
	letter-spacing: 1px;
	/* 去下划线 */
	text-decoration: none;
	/* 动画过渡 */
	transition:0.5s;
	/* 溢出隐藏 */
	overflow: hidden;
	/* 	背景模糊 */
	backdrop-filter: blur(15px);
	font-family: "微软雅黑";
	
}

.G1 .button-man:hover a{
	letter-spacing: 5px;
}
/* 制作扫光效果 */
.G1 .button-man a::before{
	content: "";
	/* 绝对定位 */
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	/* 渐变背景 透明到白色 */
	background: linear-gradient(to right,transparent,rgba(17, 15, 2, 0.25));
	/* 沿X轴倾斜45度 向右平移0像素 */
	transform: skewX(45deg) translateX(0);
	transition: 0.5s;
	
}


.G1 .button-man:hover a::before{
	/* 沿X轴倾斜45度 向右平移200% */
	transform:skewX(45deg) translateX(0);
}



.G1 .button-man::before,
.G1 .button-man::after{
	
	content:"";
	/* 绝对定位 横向居中 */
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 10px;
	
	/* 自定义颜色属性 --c ,可通过var函数条用 */
		--c: #fff;
	
		background: var(--c);
		border-radius: 5px;
		box-shadow: 
		0 0 5px var(--c),
		0 0 15px var(--c),
		0 0 30px var(--c),
		0 0 60px var(--c)
		;
		transition: 0.5s;
}





/* bug点 */
.G1 .button-man::before{
	bottom: -5px;
	
}

.G1 .button-man::after{
	top: -5px;
}



.G1 .button-man:hover::before,
.G1 .button-man:hover::after{
	height: 50%;
	width: 80%;
	border-radius: 15px;
	transition-delay: 0.3s;
}

.G1 .button-man:hover::before{
	bottom: 0;
}
.G1 .button-manr::after{
	top: 0;
}

.G2{
	position: absolute;
	bottom: 5%;
	right: 1.01%;
	width: 199px;
	height: 60px;
	margin: 30px;
	
	
	/* 隐藏元素 */
	visibility: hidden;
}

.G2 .button-shopping a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	
	
	
	line-height: 100px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	
	font-size: 17px;
	/* 更改字体大小 */
	color: #2f3640;
	/* 渐变背景 */
	background: linear-gradient(to right,#000,#2f3640,#56f3ee,#ffec19);
	background-size: 400%;
	/* 圆角 */
	border-radius: 50px;
	z-index: 1;
	/* 字间距 */
	
	font-family: "微软雅黑";
	
}

.G2 .button-shopping a::before{
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	bottom: -5px;
	right: -5px;
	
	/* 渐变背景 */
	background: linear-gradient(to right,#000,#f3e7e9,#00ffa2,#ffffff);
	background-size: 400%;
	/* 圆角 */
	border-radius: 50px;
	/* 位于按钮之下 */
	z-index: -1;
	/* 设置模糊度 显示发光效果 */
	filter: blur(20px);
}
/* 鼠标移入执行动画 */
.G2 .button-shopping a:hover{
	/* 动画 名称 时间 infinite是无限次播放 */
	animation: streamer 8s infinite;
}

.G2 .button-shopping a:hover::before{
	animation: streamer 8s infinite;
}

/* 接下来定义动画 */
@keyframes streamer {
	100%{
		/* 背景位置 */
		background-position: -400% 0;
	}
}

/* 发光效果 */
 .G2 .button-shopping a::before{
	content: "";
	position: absolute;
	
}

 
.picture-shopping {
	position: absolute;
	right: 11.6%;
	top: 16%;
	color: #e3eeff;
	float: right;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background-color: #2f2f2f;
	
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	
}
.picture-man{
	position: absolute;
	top: 16%;
	right: 3.6%;
	color:#e3eeff;
	float: right;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background-color:#2f2f2f;
	
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
 }

.boddy1{
	position: relative;
	top: 24%;
	
	background: radial-gradient(circle at top,#444,#000);
	/* background-size: 100% 100%; */
	width: 80%;
	height: 70%;
	margin: 0 auto;
	
	/* 每个元素之间的间隔相等 */
	justify-content: space-evenly;
	/* 溢出隐藏 */
	overflow: hidden;
	
	/* 边框红色 1px */
	/* border: 1px solid red; */
}
.YOU{
	position: absolute;
	right: 0;
	top: 0.6%;
	width: 100%;
	height:80%;
	/* 加个倒影 */
	-webkit-box-reflect: below 13px linear-gradient(transparent 70%,rgba(0,0,0,0.2));
	
}

.big-box{
    width: 100%;
    height: 100%;
    /* 背景图片保持原有尺寸比例，裁切长边 */
    background-size: cover;
    /* 设置过渡 */
    transition: 0.8s;
	position: absolute;
	/* right: 90%; */
}
.small-box{
    width: 200px;
    height: 460px;
    /* 弹性布局 垂直排列 均匀排列每个元素 */
    display: flex;
	
    flex-direction: column;
    justify-content: space-between;
}
.small-box .img{
    /* 相对定位 */
    position: relative;
    width: 200px;
    height: 90px;
	top: 5%;
    left: 1%;
    transition: 0.5s;
}
.small-box .img img{
    width: 100%;
    height: 100%;
    /* 保持原有尺寸比例，裁切长边 */
    object-fit: cover;
    /* 绝对定位 */
    position: absolute;
    right: 0;
    /* 设置过渡 */
    transition: 0.5s;
}
.small-box .img.active{
    opacity: 0;
    left: 250px;
}
.small-box .img:hover img{
    opacity: 0;
    left: 250px;
}

.boddy2{
	position: relative;
	top: 30%;
	width: 100%;
	height: 100vh;
	
	
	/* 边框5px 红色 */
	/* border: 5px solid red; */
	background: radial-gradient(circle at top,#444,#000)
}

.MY{
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 100%;
	/* background-color: #443e32; */
	background: radial-gradient(circle at top,#000000, #383838)
	
	
	
	/* 边框5px 红色 */
	/* border: 5px solid red; */
	
	/* display: flex;
	flex-wrap: wrap;
	justify-content: center; */
	
}

.star-unkind-1{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 2%;
	left: 1%;
}
.star-unkind-1 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-1 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-1 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-1 .text-1 h2,
.star-unkind-1 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-1 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-1 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-1 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-1:hover img{
    opacity: 0.3;
}
.star-unkind-1:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-1:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-1:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 1 */




.star-unkind-2{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 2%;
	left: 34%;
}
.star-unkind-2 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-2 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-2 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-2 .text-1 h2,
.star-unkind-2 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-2 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-2 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-2 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-2:hover img{
    opacity: 0.3;
}
.star-unkind-2:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-2:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-2:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 2 */





.star-unkind-3{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 2%;
	right:1%;
}
.star-unkind-3 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-3 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-3 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-3 .text-1 h2,
.star-unkind-3 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-3 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-3 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-3 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-3:hover img{
    opacity: 0.3;
}
.star-unkind-3:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-3:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-3:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 3 */



.star-unkind-4{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 26%;
	left: 1%;
}
.star-unkind-4 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-4 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-4 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-4 .text-1 h2,
.star-unkind-4 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-4 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-4 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-4 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-4:hover img{
    opacity: 0.3;
}
.star-unkind-4:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-4:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-4:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 4 */





.star-unkind-5{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 26%;
	left: 34%;
}
.star-unkind-5 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-5 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-5 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-5 .text-1 h2,
.star-unkind-5 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-5 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-5 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-5 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-5:hover img{
    opacity: 0.3;
}
.star-unkind-5:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-5:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-5:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 5 */







.star-unkind-6{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 26%;
	right:1%;
}
.star-unkind-6 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-6 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-6 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-6 .text-1 h2,
.star-unkind-6 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-6 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-6 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-6 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-6:hover img{
    opacity: 0.3;
}
.star-unkind-6:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-6:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-6:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 6*/







.star-unkind-7{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 49%;
	left: 1%;
}
.star-unkind-7 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-7 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-7 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-7 .text-1 h2,
.star-unkind-7 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-7 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-7 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-7 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-7:hover img{
    opacity: 0.3;
}
.star-unkind-7:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-7:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-7:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 7 */








.star-unkind-8{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 49%;
	left: 34%;
}
.star-unkind-8 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-8 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-8 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-8 .text-1 h2,
.star-unkind-8 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-8 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-8 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-8 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-8:hover img{
    opacity: 0.3;
}
.star-unkind-8:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-8:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-8:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 8 */









.star-unkind-9{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 49%;
	right:1%;
}
.star-unkind-9 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-9 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-9 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-9 .text-1 h2,
.star-unkind-9 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-9 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-9 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-9 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-9:hover img{
    opacity: 0.3;
}
.star-unkind-9:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-9:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-9:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 9 */











.star-unkind-10{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 74%;
	left: 1%;
}
.star-unkind-10 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-10 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-10 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-10 .text-1 h2,
.star-unkind-10 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-10 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-10 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-10 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-10:hover img{
    opacity: 0.3;
}
.star-unkind-10:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-10:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-10:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 10 */









.star-unkind-11{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 74%;
	left: 34%;
}
.star-unkind-11 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-11 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-11 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-11 .text-1 h2,
.star-unkind-11 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-11 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-11 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-11 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-11:hover img{
    opacity: 0.3;
}
.star-unkind-11:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-11:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-11:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}
/* 11 */






.star-unkind-12{
	width: 460px;
	height: 200px;
	overflow: hidden;
	margin: 10px;
	background-color: #444;
	color: #fff;
	cursor: pointer;
	position: absolute;
	top: 74%;
	right:1%;
}
.star-unkind-12 img{
	width: 100%;
	height: 100%;
	
	transition: 0.35s;
	
}
.star-unkind-12 .text-1{
	position: absolute;
	top: 30px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	padding: 0 18px;
}

.star-unkind-12 .text-1::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100%;
    border-left: 4px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.5);
    opacity: 0;
    /* 过渡 */
    transition: 0.5s;
    /* 过渡延迟时间 */
    transition-delay: 0.6s;
}


.star-unkind-12 .text-1 h2,
.star-unkind-12 .text-1 p{
    margin-bottom: 6px;
    opacity: 0;
    transition: 0.35s;
}
.star-unkind-12 .text-1 h2{
    font-weight: 300;
    text-transform: uppercase;
    transform: translate(30%,0%);
    transition-delay: 0.3s;
}
.star-unkind-12 .text-1 h2 span{
    font-weight: 800;
}
.star-unkind-12 .text-1 p{
    font-weight: 200;
    transform: translate(0%,30%);
}
/* 悬停样式开始 */
.star-unkind-12:hover img{
    opacity: 0.3;
}
.star-unkind-12:hover .text-1 h2{
    opacity: 1;
    transform: translate(0%,0%);
    transition-delay: 0.4s;
}
.star-unkind-12:hover .text-1 p{
    opacity: 0.9;
    transform: translate(0%,0%);
    transition-delay: 0.6s;
}
.star-unkind-12:hover .text-1::before{
    background-color: rgba(255,255,255,0);
    left: 0;
    opacity: 1;
    transition-delay: 0s;
}


/* 12 */


.but-low{
	width: 100%;
	height: 93px;
	position: relative;
	top: 40%;
	left: 0;
	
}
.but-low img{
	width: 100%;
	height: 100%;
	top: 0;
	position: absolute;
	/* 加个倒影 */
	-webkit-box-reflect: top 13px linear-gradient(transparent 70%,rgba(0,0,0,0.2));
}